<template>
  <div class="main">
    <div class="search">
      <div class="block">
        标签名称：
        <el-input
          placeholder="请输入标签名称"
          prefix-icon="el-icon-search"
          v-model="signName"
          style="width:200px"
        ></el-input>
      </div>
      <div class="block">
        标题：
        <el-input
          placeholder="请输入标题"
          prefix-icon="el-icon-search"
          v-model="titleName"
          style="width:200px"
        ></el-input>
      </div>
      <div class="block">
        <el-button type="primary" style="width:80px;" @click="search()" size="small">查询</el-button>
      </div>
      <div class="block">
        类型：
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="buts">
      <el-button type="primary" style="width:120px;" @click="show()" size="small">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="ID" label="ID" sortable width="80" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" align="left"></el-table-column>
      <el-table-column prop="type" label="分类" width="60" align="center"></el-table-column>
      <el-table-column prop="sign" label="标签" width="60" align="center"></el-table-column>
      <el-table-column prop="createdTime" sortable label="创建时间" width="200" align="center"></el-table-column>
      <el-table-column prop="publicTime" sortable label="发布时间" width="200" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.status == 1 ? '已发布':''}}
          {{scope.row.status == 0 ? '作者提交审核':''}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="400" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
          <el-button type="primary" size="small" @click="handleShow(scope.row)">预览</el-button>
          <el-button type="primary" size="small" @click="handlePublic(scope.row)">发布</el-button>
          <el-button type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <div class="shadow-model" v-if="editShow" @click="closeShow()">
      <div class="el-icon-circle-close close" @click="closeShow()"></div>
      <div class="add-w" @click="(e)=>{e.stopPropagation()}">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="所属分类">
            <el-select v-model="form.type" placeholder="所属分类" style="width:200px;">
              <el-option label="分类一" value="1"></el-option>
              <el-option label="分类一" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标题">
            <el-input v-model="form.title" style="width:200px;" placeholder="请输入标题"></el-input>
          </el-form-item>

          <el-form-item label="内容作者">
            <el-select v-model="form.author" placeholder="所属分类" style="width:200px;">
              <el-option label="作者一" value="1"></el-option>
              <el-option label="作者二" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标签">
            <el-input v-model="form.sign" style="width:200px;" placeholder="请输入标签"></el-input>
            <span>*英文逗号分隔</span>
          </el-form-item>

          <el-form-item label="配图">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>

          <el-form-item label="摘要">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>

          <el-form-item label="内容">
            <EditorBar />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="editShow = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import EditorBar from "../../components/wangEnduit.vue"; // 引入富文本框
export default {
  name: "home",
  data() {
    return {
      tableData: [
        {
          ID: 15758,
          title: "姑婆app即将上线！现在预约赠年费会员！",
          type: "",
          sign: "",
          createdTime: "2020-08-17 15:19:08",
          publicTime: "2020-08-17 15:23:59",
          status: 1,
        },
        {
          ID: 15757,
          title: "教育培训行业的市场推广手段有哪些?",
          type: "",
          sign: "",
          createdTime: "2020-08-17 14:17:30",
          publicTime: "2020-08-17 14:18:55",
          status: 0,
        },
      ],
      editShow: false,
      form: {
        name: "",
        address: "",
        date: "",
        delivery: 0,
        type: [],
        resource: "",
      },
      signName: "",
      titleName: "",
      options: [
        {
          value: "1",
          label: "APP推广",
        },
        {
          value: "2",
          label: "微信营销",
        },
        {
          value: "3",
          label: "互联网资讯",
        },
        {
          value: "4",
          label: "运营经验",
        },
        {
          value: "5",
          label: "活动推荐",
        },
        {
          value: "6",
          label: "姑婆专题",
        },
        {
          value: "7",
          label: "姑婆圈",
        },
        {
          value: "8",
          label: "APP报价",
        },
        {
          value: "9",
          label: "导航",
        },
      ],
      value: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  components: {
    EditorBar, // 引入富文本框
  },
  methods: {
    show() {
      this.form = {};
      this.editShow = true;
    },
    closeShow() {
      this.editShow = false;
    },
    onSubmit() {
      this.form.date = this.$moment(this.form.date).format("YYYY-MM-DD");
      this.tableData.push(this.form);
      this.closeShow();
    },
    //========图片处理start==========
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    //========图片处理end==========
    save(editForm) {
      this.form.date = this.$moment(this.form.date).format("YYYY-MM-DD");
      console.log(editForm.name);
      this.closeEdit();
    },
    handleClick(row) {
      this.editShow = true;
      this.form = row;
    },
    changeType(value) {
      console.log(value);
    },
    //预览
    handleShow() {},
    //发布
    handlePublic() {},
    //删除
    handleDelete() {},
  },
  mounted() {
    console.log("生命周期mounted");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../css/home.scss";
</style>
